<template>
  <van-empty image="search" description="暂无好友" v-if="!userFriendList || userFriendList.length < 1" />

  <div v-else>
    <!--  居中  -->
    <div style="display: flex;align-items: center;justify-content: center;">
      <div>
        选择好友邀请他们加入队伍
      </div>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;">
      最多邀请 {{maxNum - currentTeamNum}} 好友
    </div>
    <div v-for="user in userFriendList">
      <div style="display: flex;align-items: center;justify-content: flex-start;margin-top: 8px;">
        <van-image style="margin-top: 10px;margin-left: 20px;" :src="user.avatarUrl" width="50px" height="50px" fit="cover" round/>
        <span style="width: 30%;margin-left: 15px;font-size: 16px">{{user.notesName != null? user.notesName : user.name}}</span>
        <van-checkbox style="margin-left: 35px;" v-model="user.invite" shape="round" />
        <span style="margin-left: 3px;font-size: 14px">邀请</span>
      </div>
    </div>
    <!--  todo 按钮样式  贴底部 固定  -->
    <van-button style="margin-top: 20px;" type="primary" block text="邀请好友加入" round @click="handleInvite" :disabled="currentTeamNum == maxNum"/>

  </div>



  <van-loading  vertical v-if="isShowLoading">
    <template #icon>
      <van-icon name="star-o" size="30" />
    </template>
    加载中...
  </van-loading>
</template>

<script setup lang="ts">
import {userStore} from "../stores/user/user.ts";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {getUserFriendList} from "../api/userFriendApi.ts";
import {showToast} from "vant";
import {inviteJoinTeam} from "../api/teamApi.ts";

const userStoreAPI = userStore();
const currentUser = ref();
const route = useRoute();
const isShowLoading = ref(true);

const teamId = route.query.teamId;
const maxNum = Number(route.query.maxNum);  // 最大邀请人数
const currentTeamNum = Number(route.query.currentTeamNum); // 当前队伍人数
const userFriendList = ref()


onMounted(async () => {
  currentUser.value = await userStoreAPI.getCurrentUser();//请求是异步的！
  // 根据用户id查询好友列表
  const res = await getUserFriendList(currentUser.value.id)
  if (res.code === 200){
    userFriendList.value = res.data;
  }
  console.log('userFriendList',userFriendList.value)
  isShowLoading.value = false;
})

//邀请好友加入队伍
const handleInvite =async () => {
  // alert("邀请好友加入队伍")
  //校验参数
  const inviteList = userFriendList.value?.filter((item:any) => item.invite === true);
  if (inviteList.length > maxNum - currentTeamNum){
    showToast("邀请人数超过限制人数" + (maxNum - currentTeamNum))
    return;
  }

  if (inviteList.length === 0) {
    showToast("请选择好友")
    return;
  }
  const inviteIds = inviteList.map((item:any) => {
    return item.friendUid;
  });

  //调用接口，用户ids + 队伍id + 状态status=公开/私密
  const data = {
    friendIds: inviteIds,
    teamId: teamId,
  }
  const res = await inviteJoinTeam(data);
  if (res.code === 200) {
    showToast('邀请成功')
  } else {
    showToast('邀请失败')
  }
  return;

}


</script>


<style scoped>

</style>